import React, { useEffect, useState } from 'react'
import { Tabs } from 'antd-mobile'
import request from '../../utils/request';
import { useSelector, useDispatch } from 'react-redux'
import { StateType } from '../../store/reducer'
const App = () => {
	const token = localStorage.getItem('token');
	const dispatch = useDispatch()
	const attentionList = useSelector((state: StateType) => state.attentionList)
	const getList = () => {

		dispatch((dispatch: any) => {
			request({
				url: '/api/tag'
			}).then(resp => {
				dispatch({ type: 'SET_ATTENTION_LIST', payload: resp.data.data })
			})
		})

	}

	useEffect(() => {
		token && getList()
	}, [])
	return (
		<>
			<Tabs>
				<Tabs.Tab title='全部标签' key='fruits'>
					菠萝
				</Tabs.Tab>
				<Tabs.Tab title='关注标签' key='vegetables'>
					{
						token ? <ul>
							{
								attentionList.map((v, i) => {
									return <li key={i}>{v}</li>
								})
							}
						</ul> : <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column' }}>
							<h1>登录后可以查看关注标签</h1>
							<button>点我去登录</button>
						</div>
					}
				</Tabs.Tab>
			</Tabs>
		</>
	)
}


export default App